<template>
  <el-dialog
    title="权益列表"
    :visible.sync="visible"
    width="800px"
    stripe
    top="8vh"
    show-close
    append-to-body
    :before-close="handleClose"
  >
    <div class="wrapper">
      <div class="table-wrapper">
        <el-table
          :loading="loading"
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="rightId"
          border
          default-expand-all
          :row-class-name="tableRowClassName"
          :tree-props="{ children: 'children' }"
          :header-cell-style="{
            backgroundColor: '#d9d9d9',
            fontSize: '14px',
            padding: '10px',
            color: 'black',
            fontWeight: 'normal',
          }"
        >
          <el-table-column prop="rightName" label="权益名称" width="160">
            <template slot-scope="scope">
              <div class="rightName">
                <span class="line" v-if="scope.row.levelNum == 1"></span>
                <span>{{ scope.row.rightName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="rightDesc" label="权益描述" width="360">
          </el-table-column>
          <el-table-column prop="price" label="价格/元" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.levelNum == 2" class="price"
                >￥ {{ scope.row.price === 0 ? "免费" : scope.row.price }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="originPrice" label="原价/元" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.levelNum == 2" class="price"
                >￥
                {{
                  scope.row.price === 0 ? "免费" : scope.row.originPrice
                }}</span
              >
            </template>
          </el-table-column>
        </el-table>
        <el-table
          :loading="loading"
          :data="productList"
          style="width: 100%; margin-bottom: 20px"
          row-key="rightId"
          border
          :header-cell-style="{
            backgroundColor: '#d9d9d9',
            fontSize: '14px',
            padding: '10px',
            color: 'black',
            fontWeight: 'normal',
          }"
        >
          <el-table-column prop="productName" label="顾问服务" width="160">
          </el-table-column>
          <el-table-column prop="productDesc" label="服务描述" width="360">
          </el-table-column>
          <el-table-column prop="price" label="价格/元" align="center">
            <template slot-scope="scope">
              <span class="price"
                >￥ {{ scope.row.price === 0 ? "免费" : scope.row.price }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="originPrice" label="原价/元" align="center">
            <template slot-scope="scope">
              <span class="price"
                >￥
                {{
                  scope.row.price === 0 ? "免费" : scope.row.originPrice
                }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getRightsTree, products } from "@/api/index";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    cardType: {
      type: [String, Number],
      default: "",
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.productsFn();
        this.getRightsTreeFn();
      }
    },
  },
  data() {
    return {
      tableData: [],
      productList: [],
      loading: false,
    };
  },
  methods: {
    productsFn() {
      this.productList = [];
      const params = {
        cardType: this.cardType,
        productType: 2,
      };
      products(params).then((res) => {
        if (res.code === 200 && Object.keys(res.data).length) {
          const temp = [];
          for (const key in res.data) {
            temp.push(res.data[key]);
          }
          this.productList = temp;
        }
      });
    },
    getRightsTreeFn() {
      this.tableData = [];
      this.loading = true;
      const params = {
        cardType: this.cardType,
      };
      getRightsTree(params)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
          } else {
            this.loading = false;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    tableRowClassName({ row }) {
      if (row.levelNum == 1) {
        return "first-level-row";
      } else {
        return "second-level-row";
      }
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 18px 0 18px 18px !important;
}
.rightName {
  display: flex;
  justify-items: center;
  .line {
    width: 4px;
    height: 12px;
    background-color: #7052ff;
    border-radius: 2px;
    margin: 6px 8px 0 6px;
  }
}
.price {
  color: #7052ff;
}
::v-deep .first-level-row {
  background-color: #f1edf8; /* 第一级行的背景色 */
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  display: flex;
  align-items: center;
}

::v-deep .second-level-row {
  background-color: #fff; /* 第二级行的背景色 */
}
.wrapper {
  max-height: 600px;
  overflow-y: auto;
  .table-wrapper {
    margin-right: 18px;
  }
}
</style>
